<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link href="./weui/weui.css" rel="stylesheet">
	<link href="./weui/weui2.css" rel="stylesheet">
    <script src="./weui/zepto.min.js"></script>
	<style>
		html,body{min-height:100%;}
		body{background:#f0eff5;padding-bottom:60px;color:#333333;height:auto;}
		html{font-size:75px;}
		a{color:#333333;}
		a:active{color:#006d46;}
		.appheadtab{background:#ffffff;}
		.appheadtab li.weui-state-hover, .appheadtab li.weui-state-active a{color:#006d46;}
		.appheadtab li a{padding:0 0.3rem;font-size: .43rem;}
		.appheadtab li{line-height:1.2rem;font-weight:normal;min-width:1.8rem;}
		.appheadtab{width:100%;position:fixed;bottom:0;}
		.appheadtab li.weui-state-hover, .appheadtab li.weui-state-active a:after{background-color:#006d46;}
		#apphomebanner .dot{    width: 100%;left: 0;text-align: center;}
		#apphomebanner .dot span{margin:0 5px;}
		.homecontenttab,.homecontenttab .weui_tab_bd{height:auto;}
		.weui_navbar_item.tab-mycolor{background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border-bottom: 3px solid #006d46;color: #006d46;}
		.homecontenttab .weui_navbar_item{margin:0 .5rem;font-size:.43rem;padding-top:20px;}
		.homecontenttab .weui_navbar:after{height:0;border:none;}
		.homecontenttab .weui_navbar{background:#ffffff;position:inherit;}
		.homecontenttab .weui_navbar+.weui_tab_bd{padding-top:0;}
		.footernavbar{background:#ffffff;position:fixed;bottom:0;width:100%;}
		.footernavbar.weui_tabbar:before{height:0;border:none;}
		.footernavbar .weui_tabbar_label{font-size:.4rem;}
		.footernavbar .weui_bar_item_on .weui_tabbar_label{color:#006ec7;}
		.prditem{background:#ffffff;margin-bottom:.4rem;}
		.prdinfo {padding:10px;position: relative;}
		.prdinfo p{font-size:.43rem;margin-bottom:10px;}
		.prdinfo p b{font-weight: normal;color:#006d46;}
		.prdinfo strong{font-size:.6rem;color:#006d46;}
		.prdinfo span{padding:2px 10px;border-radius: 1rem;font-size:.45rem;background:#006d46;color:#ffffff;position:absolute;bottom:10px;right:10px;}
		@media screen and (max-width: 640px) {
			html{font-size:64px;}
		}
		@media screen and (max-width: 414px) {
			html{font-size:41px;}
		}
		@media screen and (max-width: 375px) {
			html{font-size:37px;}
		}
		@media screen and (max-width: 320px) {
			html{font-size:32px;}
		}
	</style>
</head>

<body>
	<div id="tagnav" class="weui-navigator weui-navigator-wrapper appheadtab">
		<ul class="weui-navigator-list">
			<li><a href="javascript:;">茶叶</a></li>
			<li><a href="javascript:;">蔬菜</a></li>
			<li><a href="javascript:;">食物</a></li>
			<li><a href="javascript:;">肉类</a></li>
			<li><a href="javascript:;">酒水</a></li>
			<li><a href="javascript:;">礼品</a></li>			
		</ul>
    </div>   
	
	<div class="slide" id="apphomebanner">
		<ul>
			<li>
				<a href="#">
					<img src="" data-src="https://jqweui.cn/dist/demos/images/swiper-1.jpg">
				</a>				
			</li>
			<li>
				<a href="#">
					<img src="" data-src="https://jqweui.cn/dist/demos/images/swiper-2.jpg">
				</a>				
			</li>
			<li>
				<a href="#">
					<img src="" data-src="https://jqweui.cn/dist/demos/images/swiper-3.jpg">
				</a>				
			</li>
		</ul>
		<div class="dot">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>	
	<div class="weui_tab homecontenttab" id="homecontenttab">
		<div class="weui_navbar">
			<div class="weui_navbar_item tab-mycolor">产品</div>
			<div class="weui_navbar_item">服务</div>
		</div>
		<div class="weui_tab_bd">
			<div class="weui_tab_bd_item">
				<div class="prditem">
					<a href="">
						<img src="./img/1.png" width="100%" alt="">
						<div class="prdinfo">
							<p><b>|金丝皇菊|</b>夏季精选 特级精选 特级金丝皇菊 枸杞皇菊16朵养生保健 降火消暑 包邮</p>
							<strong>￥78</strong>
							<span>看一下</span>
						</div>
					</a>					
				</div>
				<div class="prditem">
					<a href="">
						<img src="./img/1.png" width="100%" alt="">
						<div class="prdinfo">
							<p><b>|金丝皇菊|</b>夏季精选 特级精选 特级金丝皇菊 枸杞皇菊16朵养生保健 降火消暑 包邮</p>
							<strong>￥78</strong>
							<span>看一下</span>
						</div>
					</a>					
				</div>	
			</div>
			<div class="weui_tab_bd_item">
				选项二内容
			</div>
		</div>
	</div>	
	<div class="weui_tabbar footernavbar">
		<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
			<div class="weui_tabbar_icon">
				<img src="./weui/images/icon_nav_button.png">
			</div>
			<p class="weui_tabbar_label">首页</p>
		</a>
		<a href="javascript:;" class="weui_tabbar_item">
			<div class="weui_tabbar_icon">
				<img src="./weui/images/icon_nav_msg.png">
			</div>
			<p class="weui_tabbar_label">钱包</p>
		</a>
		<a href="javascript:;" class="weui_tabbar_item">
			<div class="weui_tabbar_icon">
				<img src="./weui/images/icon_nav_article.png">
			</div>
			<p class="weui_tabbar_label">购物车</p>
		</a>
		<a href="javascript:;" class="weui_tabbar_item">
			<div class="weui_tabbar_icon">
				<img src="./weui/images/icon_nav_cell.png">
			</div>
			<p class="weui_tabbar_label">我的</p>
		</a>		          
	</div>
	<script src="./weui/iscroll.js"></script>
	<script src="./weui/swipe.js"></script>
	<script type="text/javascript">
	$(function(){
		$('#apphomebanner').swipeSlide({
			autoSwipe:true,//自动切换默认是
			speed:3000,//速度默认4000
			continuousScroll: true,//默认否
			transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
			lazyLoad:true,//懒加载默认否
			firstCallback : function(i,sum,me){
				me.find('.dot').children().first().addClass('cur');
			},
			callback : function(i,sum,me){
				me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
			}
		});			
		$('#homecontenttab').tab({defaultIndex:0, activeClass:"tab-mycolor"});	   	 
		TagNav('#tagnav',{
			type: 'scrollToFirst',
		});
	});
	</script>
</body>

</html>